<template>
	<view class="container">
		<!-- 页面主体 -->
		<view class="chat-item chat-item-left" v-for="(item,index) in msgList" :key="index">
			<image :src="user.avatar" mode="aspectFill" class="avatar"></image>
			<view class="conent">
				<u-parse :content="item.content" @linkTap="linkTap" :tagStyle="tagStyle"></u-parse>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				mTxt: "",
				msgList: [],
				user: {},
				page: 1,
				tagStyle: {
					a: "color:#2979ff;font-weight:600"
				}
			};
		},
		onLoad(options) {
			this.user = JSON.parse(options.user);
			this.getMessage();
		},
		methods: {
			getMessage() {
				this.$H.get("message/chatList", {
					page: this.page,
					user_id: this.user.id
				}).then(res => {
					this.msgList = res.result;
					this.updateChatStatus();
				})
			},
			// 更新阅读状态
			updateChatStatus() {
				this.$H.post("message/updateChatStatus", {
					user_id: this.user.id
				})
			},
			linkTap(e) {
				uni.navigateTo({
					url: e.url
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	// 消息
	.chat-item {
		margin-bottom: 30rpx;
	}

	// 左边消息
	.chat-item-left {
		display: flex;

		.avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 100rpx;
			margin-right: 20rpx;
		}

		.conent {
			flex: 1;

			&:before {
				left: -10rpx;
			}
		}
	}

	// 右边消息
	.chat-item-right {
		display: flex;
		flex-direction: row-reverse;

		.avatar {
			margin-left: 20rpx;
		}

		.conent {
			margin-left: 110rpx;

			&:before {
				right: -10rpx;
			}
		}
	}

	// 消息框
	.conent {
		padding: 20rpx;
		border-radius: 10rpx;
		background-color: #fff;
		position: relative;

		&:before {
			content: "";
			width: 20rpx;
			height: 20rpx;
			background-color: #fff;
			display: inline-block;
			position: absolute;
			top: 30rpx;
			transform: rotate(45deg);
		}
	}

	// 发送消息框
	.msg-fad {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background-color: #fff;
		padding: 20rpx;
		display: flex;

		input {
			flex: 1;
			height: 80rpx;
			background-color: #F5F5F5;
			padding: 0 20rpx;
			font-size: 24rpx;
			margin-right: 20rpx;
			border-radius: 10rpx;
		}
	}
</style>